<template>
  <div>
    <el-dialog
      class="add-item-option-dialog"
      title="增加选项"
      :visible.sync="addItemOptionDialog.showDialog"
      width="50%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div class="option-name-wrap">
        选项名称：
        <el-input placeholder="名称" v-model="addItemOptionDialog.optionName"></el-input>
      </div>
      <div class="option-score-wrap">
        设置分值
        <el-input-number
          v-model="addItemOptionDialog.optionScore"
          :min="0"
          :max="addItemOptionDialog.maxOptionScore"
        ></el-input-number>
      </div>
      <div class="option-desc">
        选项备注
        <el-input
          type="textarea"
          :rows="2"
          placeholder="选项备注"
          v-model="addItemOptionDialog.optionDesc"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addItemOptionDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitItemOption">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="edit-item-dialog"
      title="提示"
      :visible.sync="editItemDialog.showDialog"
      width="50%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div class="item-name-wrap">
        评分项名称：
        <el-input placeholder="名称" v-model="editItemDialog.itemName"></el-input>
      </div>
      <div class="item-score-wrap">
        设置分值
        <el-input-number
          v-model="editItemDialog.itemScore"
          :min="1"
          :max="editItemDialog.maxItemScore"
          label="描述文字"
        ></el-input-number>
      </div>
      <div class="item-type-wrap">
        评分项类型
        <el-select v-model="editItemDialog.itemType" placeholder="请选择">
          <el-option label="直接填分数" :value="0" />
          <el-option label="单选" :value="1" />
        </el-select>
      </div>
      <div class="item-desc">
        评分项备注
        <el-input type="textarea" :rows="2" placeholder="评分项描述" v-model="editItemDialog.itemDesc"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editItemDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEditItem">确 定</el-button>
      </span>
    </el-dialog>
    <el-table class="item-table" :data="newItemList" style="width: 100%">
      <el-table-column label="序号" width="50" prop="index" />
      <el-table-column label="评分项" width="480">
        <template slot-scope="scope">
          <div class="item-name">{{scope.row.itemName}}</div>
          <div class="option-wrap">
            <item-option
              :optionList="optionList"
              :itemId="scope.row.id"
              :maxItemScore="scope.row.itemScore"
              @option-change="optionChange"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分值" width="60" prop="itemScore" />
      <el-table-column label="类型" width="180" prop="itemTypeDesc" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :disabled="scope.$index === 0"
            type="primary"
            @click="upwardItem(scope.$index, scope.row)"
          >上移</el-button>
          <el-button
            size="mini"
            :disabled="scope.$index === (newItemList.length - 1)"
            type="success"
            @click="downwardItem(scope.$index, scope.row)"
          >下移</el-button>
          <el-button size="mini" @click="editItem(scope.$index, scope.row)">修改评分项</el-button>
          <el-button
            size="mini"
            type="info"
            v-show="scope.row.itemType === 1"
            @click="addItemOption(scope.$index, scope.row)"
          >增加选项</el-button>
          <el-button size="mini" type="danger" @click="deleteItem(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="itemDesc" />
    </el-table>
  </div>
</template>
<script>
import {
  Table,
  TableColumn,
  Button,
  Dialog,
  Input,
  Select,
  Option,
  InputNumber
} from "element-ui";
import ItemOption from "./ItemOption";
import {
  upwardScoreModelItem,
  downwardScoreModelItem,
  editScoreModelItem,
  addScoreModelItemOption,
  getOptionsByModelId,
  deleteScoreModelItem
} from "@/api/score.js";
export default {
  name: "item-table",
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Input.name]: Input,
    [Option.name]: Option,
    [Select.name]: Select,
    [InputNumber.name]: InputNumber,
    ItemOption
  },
  props: {
    itemList: Array,
    modelId: Number | String,
    modelTotalScore: Number
  },
  data() {
    return {
      newItemList: [],
      optionList: [],
      editItemDialog: {
        showDialog: false,
        itemId: null,
        itemName: null,
        itemScore: null,
        itemType: null,
        itemDesc: null,
        maxItemScore: null
      },
      addItemOptionDialog: {
        showDialog: false,
        itemId: null,
        optionName: null,
        optionScore: null,
        maxOptionScore: null,
        optionDesc: null
      }
    };
  },
  methods: {
    deleteItem(index, row) {
      this.$confirm("永久删除评分子项，是否确认", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteScoreModelItem(row.id)
            .then(res => {
              this.$emit("item-pos-change");
            })
            .catch(errMsg => this.$alert(errMsg));
        })
        .catch(() => {});
    },
    editItem(index, row) {
      this.editItemDialog.itemId = row.id;
      this.editItemDialog.itemName = row.itemName;
      this.editItemDialog.itemScore = row.itemScore;
      this.editItemDialog.itemType = row.itemType;
      this.editItemDialog.itemDesc = row.itemDesc;
      this.editItemDialog.maxItemScore = this.modelTotalScore;
      this.newItemList.forEach(
        item => (this.editItemDialog.maxItemScore -= item.itemScore)
      );
      this.editItemDialog.maxItemScore += row.itemScore;
      this.editItemDialog.showDialog = true;
    },
    submitEditItem() {
      editScoreModelItem({
        itemId: this.editItemDialog.itemId,
        itemName: this.editItemDialog.itemName,
        itemScore: this.editItemDialog.itemScore,
        itemType: this.editItemDialog.itemType,
        itemDesc: this.editItemDialog.itemDesc
      })
        .then(res => {
          this.editItemDialog.showDialog = false;
          this.$emit("item-pos-change");
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    upwardItem(index, row) {
      upwardScoreModelItem(row.id)
        .then(res => {
          this.$emit("item-pos-change");
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    downwardItem(index, row) {
      downwardScoreModelItem(row.id)
        .then(res => {
          this.$emit("item-pos-change");
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    addItemOption(index, row) {
      this.addItemOptionDialog.optionName = null;
      this.addItemOptionDialog.optionScore = 0;
      this.addItemOptionDialog.optionDesc = null;
      this.addItemOptionDialog.itemId = row.id;
      this.addItemOptionDialog.maxOptionScore = row.itemScore;
      this.addItemOptionDialog.showDialog = true;
    },
    submitItemOption() {
      addScoreModelItemOption({
        itemId: this.addItemOptionDialog.itemId,
        optionName: this.addItemOptionDialog.optionName,
        optionDesc: this.addItemOptionDialog.optionDesc,
        optionScore: this.addItemOptionDialog.optionScore
      })
        .then(res => {
          this.addItemOptionDialog.showDialog = false;
          this.$emit("item-pos-change");
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    optionChange() {
      this.$emit("item-pos-change");
    }
  },
  watch: {
    itemList() {
      this.newItemList = this.itemList;
      this.newItemList.forEach((item, index) => {
        item.index = index + 1;
      });
      getOptionsByModelId(this.modelId)
        .then(res => (this.optionList = res))
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  }
};
</script>
<style lang="stylus" scoped>
.add-item-option-dialog {
  .option-name-wrap {
    .el-input {
      width: 300px;
    }

    margin-bottom: 3px;
  }

  .option-score-wrap {
    .el-input-number {
      width: 300px;
      margin-left: 14px;
    }

    margin-bottom: 3px;
  }
}

.edit-item-dialog {
  .item-name-wrap {
    .el-input {
      width: 300px;
    }

    margin-bottom: 3px;
  }

  .item-score-wrap {
    .el-input-number {
      width: 300px;
      margin-left: 28px;
    }

    margin-bottom: 3px;
  }

  .item-type-wrap {
    .el-select {
      width: 300px;
      margin-left: 14px;
    }

    margin-bottom: 3px;
  }
}

.item-table {
  .item-name {
    font-weight: bolder;
    font-size: 20px;
  }

  .option-wrap {
    background-color: #ccc;
    margin-left: 10px;
  }
}
</style>